import { Form, Input, message, Modal, Select } from "antd"
import { useImperativeHandle, useState } from "react"
import { useRequest } from "umi"
const { Option } = Select;

interface PropsType {
  cRef: any,
  submit: () => void,
  garbage_classify_id?: number
}
export interface dataType {
  id: string,
  garbage_name: string,
  garbage_classify_id: number
}

const EditForm: React.FC<PropsType> = ({cRef, submit, garbage_classify_id}) => {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [typeModal, setTypeModal] = useState(1)
  const [classifyId, setClassifyId] = useState(garbage_classify_id)
  const [formId, setFormId] = useState<string | null>(null)
  const [form] = Form.useForm()

  useImperativeHandle(cRef, () => ({
    open: (type: number, data?: dataType) => {
      if (data) {
        form.setFieldsValue(data)
        setFormId(data.id)
        setClassifyId(data.garbage_classify_id)
      }
      setTypeModal(type)
      setIsModalVisible(true)
    }
  }))

  const { run: addApi, loading: addLoading } = useRequest((data) => ({
    url: '/garbage/createGarbage',
    method: 'post',
    data
  }), { manual: true })

  const { run: updateApi, loading: updateLoading } = useRequest((data) => ({
    url: '/garbage/updateGarbage',
    method: 'post',
    data
  }), { manual: true })

  const handleOk = () => {
    form.validateFields().then(async values => {
      if (typeModal === 1) {
        const data = {
          ...values,
        }
        if (classifyId) {
          data.garbage_classify_id = classifyId
        }
        await addApi(data)
      } else {
        const data = {
          ...values,
          id: formId,
        }
        if (garbage_classify_id) {
          data.garbage_classify_id = garbage_classify_id
        }
        await updateApi(data)
      }
      submit()
      message.success('操作成功')
      setIsModalVisible(false);
      form.resetFields();
    }).catch(() => {})
  }; 
  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };
  return <Modal
      title={ typeModal === 1 ? "新增" : "修改" }
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      confirmLoading={addLoading || updateLoading}
    >
    <Form
      form={form}
      autoComplete="off"
    >
      <Form.Item label="垃圾名称" name="garbage_name" rules={[{ required: true }]}>
        <Input maxLength={10} />
      </Form.Item>
      {
        garbage_classify_id ? null :
        <Form.Item label="垃圾分类" name="garbage_classify_id" rules={[{ required: true }]}>
          <Select>
            <Option value={1}>有害垃圾</Option>
            <Option value={2}>厨余垃圾</Option>
            <Option value={3}>可回收物</Option>
            <Option value={5}>其他垃圾</Option>
          </Select>
        </Form.Item>
      }
      <Form.Item label="垃圾备注" name="garbage_desc" rules={[{ required: true }]}>
        <Input maxLength={20} />
      </Form.Item>
      <Form.Item label="大写索引" name="garbage_indexes" rules={[
        { required: true },
        { pattern: new RegExp(/^[A-Z]{1,}$/), message: '请输入A-Z范围的字符' }
      ]}>
        <Input maxLength={10} />
      </Form.Item>
    </Form>
  </Modal>
}

export default EditForm